<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程详情</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
    <style>
        .dashboard {
            max-width: 1200px;
            margin: 0 auto;
        }
        .stats-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            padding: 20px;
            border-radius: 4px;
            background-color: #f5f7fa;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .stat-card h3 {
            margin-top: 0;
            color: #666;
            font-size: 16px;
        }
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="text" @click="goBack()">返回</el-button>

    <h1>课程详情</h1>
    <div class="dashboard">
        <!-- 日期选择器 -->
        <el-date-picker
            v-model="selectedDate"
            type="month"
            placeholder="选择月份"
            @change="fetchData"
            :picker-options="pickerOptions"
        ></el-date-picker>

        <!-- 统计卡片 -->
        <div class="stats-container">
            <div class="stat-card">
                <h3>成课节数</h3>
                <div class="value">{{ stats.completedLessons }}</div>
            </div>
            <div class="stat-card">
                <h3>取消节数</h3>
                <div class="value">{{ stats.cancelledLessons }}</div>
            </div>
            <div class="stat-card">
                <h3>约课人次</h3>
                <div class="value">{{ stats.bookings }} 人次</div>
            </div>
            <div class="stat-card">
                <h3>消耗次卡</h3>
                <div class="value">{{ consumedTimesCardCount }} 次</div>
            </div>
            <div class="stat-card">
                <h3>消耗储值卡</h3>
                <div class="value">¥{{ consumedStoredValueCardAmount }}</div>
            </div>
        </div>

        <!-- 每日课程表格 -->
        <el-table :data="dailyCourses" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="120">
                <template #default="{ row }">
                    {{ formatDate(row.date) }}
                </template>
            </el-table-column>
            <el-table-column prop="courseName" label="课程名称"></el-table-column>
            <el-table-column prop="teacher" label="教师"></el-table-column>
            <el-table-column label="时间">
                <template #default="{ row }">
                    {{ formatTime(row.startTime) }} - {{ formatTime(row.endTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-tag :type="row.status === '已完成' ? 'success' : row.status === '已取消' ? 'danger' : 'info'">
                        {{ row.status }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>

<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script src="../../api/statistics.js"></script>
<script>
new Vue({
    el: '#app',
    data() {
        return {
            courseId: '',
            shopkeeperId: '',
            selectedDate: new Date(),
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            stats: {
                completedLessons: 0,
                cancelledLessons: 0,
                bookings: 0, // 确保 bookings 属性存在
                usedTimes: 0,
                usedBalance: 0
            },
            dailyCourses: [],
            // 新增：消耗次卡和消耗储蓄卡数据
            consumedTimesCardCount: 0,
            consumedStoredValueCardAmount: 0
        };
    },
    created() {
        const urlParams = new URLSearchParams(window.location.search);
        this.courseId = urlParams.get('courseId');
        this.shopkeeperId = urlParams.get('shopkeeperId');
        if (!this.courseId || !this.shopkeeperId) {
            console.error('未获取到courseId或shopkeeperId');
            // 可以添加错误处理，如重定向回原页面
        }
    },
    methods: {
        goBack() {
            window.history.back();
        },
        fetchData() {
            const year = this.selectedDate.getFullYear();
            const month = this.selectedDate.getMonth() + 1;
            
            // 调用getCourseByMonth接口
            getCourseByMonth({
                id: this.shopkeeperId,
                year: year,
                month: month
            }).then(res => {
                if (res.code === 1) {
                    this.dailyCourses = res.data.map(course => ({
                        date: course.courseDate,
                        courseName: course.courseName,
                        teacher: course.teacherName,
                        startTime: course.startTime,
                        endTime: course.endTime,
                        status: course.status
                    }));

                    // 统计成课节数和取消节数
                    this.stats.completedLessons = res.data.reduce((sum, course) => sum + (course.completedLessons || 0), 0);
                    this.stats.cancelledLessons = res.data.reduce((sum, course) => sum + (course.cancelledLessons || 0), 0);

                    // 新增：统计约课人次
                    this.stats.bookings = res.data.reduce((sum, course) => sum + (course.appointmentCount || 0), 0);
                } else {
                    this.$message.error(res.msg || '获取数据失败');
                }
            }).catch(err => {
                this.$message.error('请求出错: ' + err.message);
            });

            // 新增：调用 fetchCardStats 方法
            this.fetchCardStats(year, month);
        },
        // 新增：获取卡统计数据的方法
        fetchCardStats(year, month) {
            getCardStatsByYearAndMonth({
                shopkeeperId: this.shopkeeperId,
                year: year,
                month: month
            }).then(res => {
                if (res.code === 1) {
                    this.consumedTimesCardCount = res.data.consumedTimesCardCount || 0;
                    this.consumedStoredValueCardAmount = res.data.consumedStoredValueCardAmount || 0;
                } else {
                    this.$message.error(res.msg || '获取卡统计数据失败');
                }
            }).catch(err => {
                this.$message.error('请求出错: ' + err.message);
            });
        },
        formatDate(date) {
            const d = new Date(date);
            return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}`;
        },
        formatTime(time) {
            const t = new Date(time);
            return `${t.getHours().toString().padStart(2, '0')}:${t.getMinutes().toString().padStart(2, '0')}`;
        }
    },
    mounted() {
        this.fetchData();
    }
});
</script>
</body>
</html>